<template>
  <div class="app-container">
    <!--<sticky :z-index="10" :class-name="'sub-navbar ' + 'draft'" style="margin-bottom: 10px" v-if="false">-->
    <!--  <el-button type="success" @click="refreshPage">-->
    <!--    刷新-->
    <!--  </el-button>-->
    <!--</sticky>-->
    <el-tree
      empty-text="加载中,请稍等......."
      :data="list"
      node-key="id"
      lazy
      :default-expanded-keys="[default_id]"
      :load="load" >
      <div class="custom-tree-node" slot-scope="{ node, data }">
        <div class="name">
          <span>[ ID: {{ data.id }}]</span>
          <span>[ 用户: {{ data.user_id }}]</span>
          <span>[ 订单: {{ data.order_id }} ]</span>
          <span>[ 数量: {{ data.count }} ]</span>
        </div>
        <div class="right">
          <div class="show">
            <!--<span style="color: red" v-if="data.level0 && +data.level0.value > 0">{{showLevel(data)}}</span>-->
            <!--<span style="color: blue" v-else>{{showLevel(data)}}</span>-->
          </div>
          <div class="change">
            <span @click.stop="change(data)">查看</span>
          </div>
        </div>
      </div>
    </el-tree>
  </div>
</template>

<script>
// import Sticky from '@/components/Sticky'
import api from '@/api'
export default {
  name: 'MemberTeam',
  components: {
    // Sticky
  },
  data() {
    return {
      list: [],
      listLoading: false,
      default_id: 0
    }
  },
  methods: {
    // refreshPage() {
    //   console.log(this.list)
    // },
    async fetchDataMain(resolve) {
      this.list = []
      api.member.getOrderTreeMain({ id: this.$route.params.id }).then(response => {
        return resolve(response.data)
      }).finally(() => {
      })
    },
    async fetchData(id, resolve) {
      api.member.getOrderTree({ id }).then(response => {
        return resolve(response.data)
      }).finally(() => {
      })
    },
    load(node, resolve) {
      if (node.level === 0) {
        this.fetchDataMain(resolve)
      }
      this.fetchData(node.key, resolve)
    },
    // showLevel(data) {
    //   return data.level0 && data.level0.display || ''
    // },
    // change(data) {
    //   // console.log(data.id, data.sort)
    //   if (!data.sort || isNaN(data.sort)) {
    //     return this.$message.error('操作错误, 只能是数字!!!')
    //   }
    //   api.member.changeSort({ id: data.id, sort: data.sort }).then(() => {
    //     this.$message.success('操作成功')
    //   })
    // }
    change(data) {
      this.$router.push(`/order/tree/${data.id}`)
    }
  },
  mounted() {
    // this.fetchData()
    this.default_id = this.$route.params.id
  }
}
</script>

<style scoped lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 10px;
  background: #f3f5f7;
}
.name {
  //background: red;
  flex: 1;
  overflow: hidden;
  span {
    margin-right: 30px;
  }
}
.right {
  width: 220px;
  display: flex;
  justify-content: space-between;
}
.show {
  //background: blue;
  flex: 1;
}

.change {
  //width: 200px;
  .sort {
    width: 50px;
    //margin: 0;
    //padding: 0;
    height: 20px;
    line-height: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    margin-left: 10px;
  }
}

</style>
